// @ts-expect-error plugin
import plugin from "tailwindcss/plugin.js";

export const enterAnimationPlugin = plugin(({ addUtilities }) => {
  const maxChild = 5;
  const utilities: Record<string, any> = {};
  for (let i = 1; i <= maxChild; i++) {
    const baseDelay = 0.1;
    const delay = `${baseDelay * i}s`;

    utilities[`.enter-x:nth-child(${i})`] = {
      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
      opacity: "0",
      transform: `translateX(50px)`
    };

    utilities[`.enter-y:nth-child(${i})`] = {
      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
      opacity: "0",
      transform: `translateY(50px)`
    };

    utilities[`.enter-x-negative:nth-child(${i})`] = {
      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
      opacity: "0",
      transform: `translateX(-50px)`
    };

    utilities[`.enter-y-negative:nth-child(${i})`] = {
      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
      opacity: "0",
      transform: `translateY(-50px)`
    };
  }

  // 添加动画关键帧
  addUtilities(utilities);
  addUtilities({
    "@keyframes enter-x-animation": {
      to: {
        opacity: "1",
        transform: "translateX(0)"
      }
    },
    "@keyframes enter-y-animation": {
      to: {
        opacity: "1",
        transform: "translateY(0)"
      }
    }
  });

  // 布局卡片容器
  addUtilities({
    ".containerCard": {
      "box-sizing": "border-box",
      "padding": "24px",
      "font-size": "14px",
      "background-color": "var(--el-color-colorBgContainer)",
      "border": "1px solid var(--el-color-colorBorderSecondary)",
      "border-radius": "calc(var(--el-color-borderRadiusLG) * 1px)"
    }
  });
});
